<template>
  <div class="trees">
    <h4 class="title">常住地址</h4>
    <el-scrollbar style="flex:1" wrap-class="scrollbar-wrapper">
      <el-tree
        ref="treeList"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        lazy
        :load="loadNode"
        :highlight-current="true"
        :default-expand-all="false"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span class="svg-container">
            <i class="el-icon-location" style="color:#c99801" />
            <!-- v-if="data.children && data.children.length > 0" -->
            <!-- <i v-else class="el-icon-document" /> -->
          </span>
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { lazyRegion, lazyNodeRegion } from "@/api/setup/region"
const defaultDic = {
  parentId: "1", // 上级父节点id
  orgId: "", // 机构id
  regionName: "", // 区划名称
  regionCode: "", // 区划编码
  regionLevel: "", // 区划级别
  orderNum: "" // 排序
}

export default {
  name: "LeftTrees",
  data() {
    return {
      depForm: Object.assign({}, defaultDic),
      treeData: [
        {
          id: 11,
          label: "园林办事处",
          children: [
            {
              id: 113,
              label: "城南社区"
            },
            {
              id: 114,
              label: "东方社区"
            },
            {
              id: 115,
              label: "辉煌社区"
            },
            {
              id: 116,
              label: "深河社区"
            }
          ]
        },
        {
          id: 22,
          label: "杨市办事处",
          children: [
            {
              id: 224,
              label: "翰岭社区",
              children: [
                {
                  id: 225,
                  label: "菜科所"
                },
                {
                  id: 226,
                  label: "多种场"
                },
                {
                  id: 227,
                  label: "处直单位"
                }
              ]
            }
          ]
        },
        {
          id: 33,
          label: "周矶办事处",
          children: [
            {
              id: 333,
              label: "爱民社区",
              children: [
                {
                  id: 334,
                  label: "卫生院"
                },
                {
                  id: 335,
                  label: "财管所"
                },
                {
                  id: 336,
                  label: "政府"
                }
              ]
            }
          ]
        },
        {
          id: 44,
          label: "广华办事处",
          children: [
            {
              id: 443,
              label: "青龙村"
            },
            {
              id: 444,
              label: "舒家沟村"
            },
            {
              id: 445,
              label: "兰家岗村"
            }
          ]
        },
        {
          id: 55,
          label: "泰丰办事处",
          children: [
            {
              id: 553,
              label: "锦原社区"
            }
          ]
        },
        {
          id: 66,
          label: "高场办事处",
          children: [
            {
              id: 663,
              label: "街居委会"
            },
            {
              id: 664,
              label: "农科所"
            }
          ]
        },
        {
          id: 77,
          label: "竹根滩镇",
          children: [
            {
              id: 773,
              label: "文卫路"
            },
            {
              id: 774,
              label: "竹中街"
            }
          ]
        }
      ],
      defaultProps: {
        // children: 'children',
        // label: 'label',
        label: "regionName",
        children: "children",
        isLeaf: "isLeaf"
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 树懒加载
    async loadNode(node, resolve) {
      if (node.level === 0) {
        const res = await lazyRegion(this.depForm)
        // console.log(res)
        if (res.code === "1000") {
          this.treeData = res.data
          return resolve(this.treeData)
        }
      }
      if (node.level > 0) {
        const result = await lazyNodeRegion(node.data.regionCode)
        if (result.code === "1000") {
          return resolve(result.data)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.trees {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    border-left: 4px solid #3192f3;
    padding-left: 10px;
    font-size: 20px;
    margin: 20px 10px 10px 20px;
  }
  /deep/.scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .custom-tree-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    span {
      i {
        margin-right: 5px;
      }
      &:nth-child(2) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>
